<template>
  <Page class="bg-[#f5f5f5] text-[#333] min-h-screen pb-[40rpx]">
    <!-- 顶部标题 -->
    <view class="relative bg-gradient-to-br from-[#e9ecef] to-[#f5f5f5] py-[48rpx] mb-[32rpx] rounded-b-[32rpx] shadow-md">
      <view class="absolute top-[24rpx] left-[24rpx] z-10 w-[60rpx] h-[60rpx] rounded-full bg-[#165DFF] text-white flex items-center justify-center cursor-pointer" @tap="goBack">
        <IconFont name="left" class="text-[32rpx]" />
      </view>
      <view class="text-center">
        <view class="text-[42rpx] font-bold text-[#165DFF] mb-[12rpx]">联系我们</view>
        <view class="text-[26rpx] text-[#666] max-w-[700rpx] mx-auto">无论您有任何问题、建议或合作意向，我们都期待与您沟通。请选择最便捷的联系方式或填写反馈表单</view>
      </view>
    </view>

    <!-- 地图区域 -->
    <view class="bg-white rounded-[24rpx] shadow-md mb-[32rpx] overflow-hidden mx-[24rpx]">
      <view class="p-[24rpx] border-b border-[#f0f0f0]">
        <view class="text-[28rpx] font-bold text-[#222]">我们在这里</view>
      </view>
      <view class="h-[400rpx] relative bg-[#e9ecef] flex items-center justify-center">
        <view class="absolute inset-0 bg-[rgba(233,236,239,0.7)] flex flex-col items-center justify-center text-center p-[24rpx]">
          <IconFont name="icon-map-marked-alt" class="text-[60rpx] text-[#165DFF] mb-[16rpx]" />
          <view class="text-[28rpx] font-bold text-[#222] mb-[8rpx]">公司总部位置</view>
          <view class="text-[24rpx] text-[#666] mb-[16rpx]">中国广西南宁市青秀区民族大道136号华润大厦B座2801室</view>
          <view class="text-[28rpx] font-bold text-[#222] mb-[8rpx]">分公司位置</view>
          <view class="text-left pl-[16rpx] text-[24rpx] text-[#666]">
            <view class="mb-[8rpx]">广州市天河区珠江新城华夏路30号富力中心</view>
            <view>柳州市鱼峰区白沙路15号中房大厦</view>
          </view>
        </view>
      </view>
    </view>

    <view class="container max-w-[750rpx] mx-auto px-[20rpx]">

      <!-- 地图区域 -->
      <view
        class="map-section mb-[60rpx] bg-white rounded-[12rpx] shadow-[0_5rpx_20rpx_rgba(0,0,0,0.05)] overflow-hidden"
      >
        <view class="location-header p-[20rpx_30rpx] border-b border-[#f0f0f0]">
          <view class="location-title text-[22rpx] font-semibold text-[#333]"
            >我们在这里</view
          >
        </view>
        <view class="map-container h-[400rpx] relative bg-[#e9ecef]">
          <view
            class="map-overlay absolute inset-0 bg-[rgba(233,236,239,0.7)] flex items-center justify-center text-center p-[20rpx]"
          >
            <view class="map-placeholder">
              <view
                class="placeholder-icon text-[50rpx] text-[#1890ff] mb-[20rpx]"
              >
                <IconFont name="icon-map-marked-alt" />
              </view>
              <view
                class="placeholder-text text-[18rpx] font-semibold text-[#333] mb-[15rpx]"
                >公司总部位置</view
              >
              <view class="placeholder-desc text-[16rpx] text-[#666] mb-[25rpx]"
                >中国广西南宁市青秀区民族大道136号华润大厦B座2801室</view
              >

              <view
                class="placeholder-text text-[18rpx] font-semibold text-[#333] mb-[15rpx]"
                >分公司位置</view
              >
              <view class="text-left pl-[20rpx] text-[16rpx] text-[#666]">
                <view class="mb-[10rpx]"
                  >广州市天河区珠江新城华夏路30号富力中心</view
                >
                <view>柳州市鱼峰区白沙路15号中房大厦</view>
              </view>
            </view>
          </view>
        </view>
      </view>

     
    </view>
  </Page>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import {
  Form as nutForm,
  FormItem as nutFormItem,
  Input as nutInput,
  Textarea as nutTextarea,
  Button as nutButton,
  Picker as nutPicker,
} from "@nutui/nutui-taro";

// 联系卡片数据
const contactCards = ref([
  {
    title: "客服支持",
    icon: "icon-headset",
    items: [
      { icon: "icon-phone", label: "客服电话", value: "400-888-1234" },
      {
        icon: "icon-clock",
        label: "服务时间",
        value: "工作日 8:30-21:00，周末 9:00-18:00",
      },
      {
        icon: "icon-envelope",
        label: "客服邮箱",
        value: "support@multi-roles.com",
      },
      {
        icon: "icon-whatsapp",
        label: "在线客服",
        value: '点击网站右下角"在线客服"图标',
      },
    ],
  },
  {
    title: "商务合作",
    icon: "icon-handshake",
    items: [
      { icon: "icon-user-tie", label: "商务负责人", value: "王经理" },
      { icon: "icon-phone", label: "联系电话", value: "185-1234-5678" },
      {
        icon: "icon-envelope",
        label: "合作邮箱",
        value: "partner@multi-roles.com",
      },
      {
        icon: "icon-file-contract",
        label: "合作类型",
        value: "企业商家入驻、服务商合作、广告推广",
      },
    ],
  },
]);

// 表单数据
const formData = ref({
  name: "",
  contact: "",
  category: "",
  message: "",
});

// 问题类型选项
const categoryOptions = ref([
  { label: "账号问题", value: "account" },
  { label: "支付问题", value: "payment" },
  { label: "任务相关问题", value: "task" },
  { label: "功能建议", value: "suggest" },
  { label: "其他问题", value: "other" },
]);

// FAQ数据
const faqs = ref([
  {
    question: "如何成为平台从业者？需要满足什么条件？",
    answer:
      "只需完成实名认证并缴纳规则押金即可成为平台从业者。一个身份证只能认证一个账号，从业者需要遵守平台规则，违规行为会受到警告、冻结直至封号等处罚。",
  },
  {
    question: "提现有哪些限制？为什么提现金额有限制？",
    answer:
      "个人用户每月提现限额为1.5万元，平台商家为15万元/月。此限制是根据金融安全监管要求设置的，确保平台资金安全和合规运营。",
  },
  {
    question: "任务发布后如何确保执行方按时完成？",
    answer:
      "平台采取分阶段结算机制，您可以设置多个阶段任务并分别结算。每个阶段完成后，您验收满意再支付该阶段费用。平台将冻结任务总金额以确保安全。",
  },
  {
    question: "遇到任务纠纷如何解决？",
    answer:
      '任何一方均可点击"我有异议"发起纠纷处理。平台将冻结该笔交易金额，由双方协商解决。若协商不成，平台将根据双方提供的聊天记录等证据链进行仲裁。',
  },
]);

// 表单提交处理
const handleSubmit = () => {
  // 简单验证
  if (!formData.value.name) {
    Taro.showToast({ title: "请输入您的姓名", icon: "none", duration: 2000 });
    return;
  }

  if (!formData.value.contact) {
    Taro.showToast({ title: "请输入联系方式", icon: "none", duration: 2000 });
    return;
  }

  if (!formData.value.message) {
    Taro.showToast({ title: "请描述您的问题", icon: "none", duration: 2000 });
    return;
  }

  // 模拟提交
  Taro.showLoading({ title: "提交中..." });

  setTimeout(() => {
    Taro.hideLoading();
    Taro.showToast({
      title: "反馈信息已提交成功！我们将在1-3个工作日内回复您。",
      icon: "none",
      duration: 3000,
    });

    // 重置表单
    formData.value = {
      name: "",
      contact: "",
      category: "",
      message: "",
    };
  }, 1500);
};

// Picker 确认和取消事件
const onPickerConfirm = (e) => {
  formData.value.category = e.value[0].value;
};

const onPickerCancel = () => {
  console.log("Picker cancel");
};

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

</script>
